<script lang="ts" setup>
import { computed } from 'vue'
import { useMainStore } from '@/store/main'

const store = useMainStore()
// 入参
const props = defineProps({
  // 旋转角度
  currentItem: {
    type: Object,
    default: () => ({}),
  },
})
const fileUrl = computed(() => {
  return `${window.IPCONFIG}/fpi/wjfw/download?wjbh=${props.currentItem.wjbh}`
})

enum Wjlx {
  'gd0020001' = 'audio',
  'gd0020002' = 'video',
  'gd0020003' = 'image',
}
const checkType = () => {
  return Wjlx[store.$state.nodeTreeData?.mllxdm as keyof typeof Wjlx]
}
</script>
<template>
  <div class="container">
    <div class="preview-box">
      <img style="height: 100%" v-if="checkType() === 'image'" :src="fileUrl" alt="" />
      <video
        style="width: 100%; height: 100%"
        v-else-if="checkType() === 'video'"
        :src="fileUrl"
        controls
        controlsList="nodownload"
      ></video>
      <audio
        style="width: 100%"
        v-else-if="checkType() === 'audio'"
        :src="fileUrl"
        controls
        controlsList="nodownload"
      ></audio>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}

.preview-box {
  height: calc(100% - 60px);
  padding: 10px;
  display: flex;
  justify-content: center;
}
.footer {
  padding-right: 20px;
  text-align: right;
}
</style>
